<template>
	<view style="text-align: center;">
		<view style="padding:20rpx;display: flex;align-items: flex-end;justify-content: center;">
			<image :src="baseUrl + 'icon/mokaSuccess.png'" style="width: 75rpx;" mode="widthFix"></image><text
				style="font-size: 40rpx;font-weight: bold;margin-left: 20rpx;">模卡制作完成！</text>
		</view>
		<view style="margin-top: 50rpx;padding: 30rpx;">
			<image :src="mokaurl" mode="widthFix" @click.stop="showPhoto(mokaurl)"></image>
		</view>
		<view>
			<button class="shareBtn" style="margin-top: 60rpx;background-color: #FFDD00;"
				 @click.stop="showPhoto(mokaurl)">预览/长按下载模卡</button>
			<button class="shareBtn" style="margin-top: 40rpx;background-color: #FFDD00;"
				open-type="share">分享模卡</button>
			<button class="shareBtn" style="margin-top: 40rpx;color: #999;" @click="backHomepage">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mokaid: 0,
				moka: {},
				mokaurl: '',
				baseUrl: ''
			};
		},
		onLoad(options) {
			this.baseUrl = this.$baseUrl;
			this.mokaid = options.mokaid;
			this.getMoka();
		},
		onShareAppMessage({
			from,
			target
		}) {

			let mokaUrl = this.moka.MokaPic; // this.$baseUrl + this.moka.MokaOkUrl;
			let mokaUser = this.moka.User

			let myObj = {
				title: mokaUser.NickName + "的模卡",
				path: "/artistesPages/pages/artister?artisterID=" + mokaUser.UserID + '&launch=1',
				imageUrl: mokaUrl
			}
			return myObj;
		},
		methods: {
			showPhoto(photo) {
				var photoUrls = [];
				photoUrls.push(photo)
			
				uni.previewImage({
					current: 0,
					urls: photoUrls,
					showmenu: true,
				})
			},
			getMoka() {
				this.$httpost('/Moka/Moka', {
					MokaID: this.mokaid
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.moka = res.data;
						this.mokaurl = this.moka.MokaOkUrl;

						// console.log(this.moka, this.mokaurl)
					}
				});
			},
			backHomepage() {
				this.$common.goSwtPage('/pages/index/index');
			},
			download() {
				const _that = this;

				uni.getSetting({
					success: function(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							// 判断授权成功开始下载
							// console.log(11111)
							_that.downloadPic(_that.mokaurl)
						} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
							// 判断授权成功开始下载
							// console.log(2222)
							_that.downloadPic(_that.mokaurl)
						} else {
							// 判断授权失败，弹框提示用户授权
							uni.showModal({
								title: '提示',
								content: '需要授权保存相册',
								showCancel: true,
								success: function(resShow) {
									if (resShow.confirm) {
										// 弹出用户点击同意
										uni.openSetting({
											scope: 'scope.writePhotosAlbum',
											success: function(resOpen) {
												// 授权成功开始下载
												this.downloadPic(resOpen.url)
											},
											fail: function(errorOpen) {
												// 授权失败输出错误信息
												console.log(errorOpen, 'openSetting')
											}
										})
									} else {
										// 用户取消授权提示用户
										that.showToast('取消授权无法下载')
									}
								}
							})
						}
					},
					fail: function(error) {
						// 失败错误信息输出
						console.log(error, 'getSetting')
					}
				})
			},
			downloadPic(url) {
				const _that = this;
				uni.downloadFile({
					url: url,
					filePath: uni.env.USER_DATA_PATH + '/' + new Date().getTime() + '.jpg',
					success(res) {
						if (res.statusCode === 200) {
							// 下载成功开始保存图片
							// console.log(res.filePath)
							_that.savePic(res.filePath)
						}
					},
					fail(error) {
						// 下载失败输出错误信息
						console.log('下载失败', error)
					}
				})
			},
			savePic(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: function() {
						console.log('保存成功')
					},
					fail: function(error) {
						console.log('保存失败', error)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shareBtn {
		width: 75vw;
		margin: auto;
		height: 77rpx;
		color: #000;
		font-size: 29rpx;
		line-height: 77rpx;
		border-radius: 50rpx;

		&::after {
			border: none;
		}
	}

	.backBtn {
		clear: both;
		width: 80vw;
		margin: auto;
		height: 60rpx;
		background-color: #FFDD00;
		color: #000;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-top: 60rpx;
	}
</style>